<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>自定义顶部城市分组</title>
    <link href="./common.css" rel="stylesheet" type="text/css" />
    <style>
        html,
        body {
            height: 100%;
        }
        
        #container {
            height: 50%;
        }
        
        #openBtn {
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="container">
    </div>
    <button class="changeCity">选择城市</button>
    <button id="closeIconBtn">清除图层</button>
    <div><pre id="selectedCityInfo"></pre></div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=160cab8ad6c50752175d76e61ef92c50'></script>
    <!-- UI组件库 1.1 -->
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.2"></script>
    <!-- <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> -->
    <script src="./common.js"></script>
    <script type="text/javascript">
        //AMapUI.setDomLibrary(Zepto);
        let pos = [106.506807, 29.535172]
        let positions = []
        for (var i = 0; i < 100; i++) {

            positions.push([pos[0] + Math.random() * 0.1, pos[1] + Math.random() * 0.05])

        }

        console.log(positions)
        AMapUI.loadUI(['misc/MobiCityPicker'], function(MobiCityPicker) {

            var cityPicker = new MobiCityPicker({
                topGroups: [{
                    //组的唯一标识
                    id: 'common_city',
                    //标题
                    title: '常用城市',
                    //右侧锚点索引标题，建议单个字符
                    anchorTitle: '常',
                    //城市的adcodes列表(adcodes内容可以用MobiCityPicker.getCityData()获取)
                    adcodes: [
                        "110000",
                        "310000",
                        "440300",
                        "440100",
                        "510100",
                        "330100",
                        "320500",
                        "500000",
                        "420100",
                        "610100",
                        "320100",
                        "120000"
                    ]
                }, {
                    //组的唯一标识
                    id: 'common_city',
                    //标题
                    title: '推荐城市',
                    //右侧锚点索引标题，建议单个字符
                    anchorTitle: '荐',
                    //城市的adcodes列表(adcodes内容可以用MobiCityPicker.getCityData()获取)
                    adcodes: [
                        "110000",
                        "310000",
                        "120000"
                    ]
                }]
            });

            cityPickerReady(cityPicker);

            // cityPicker.show();
        });
    </script>
</body>

</html>